{% extends 'index.html' %}
{% load static %}

{% block title %}文章详情{% endblock %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/article_detail.css' %}">
<link rel="stylesheet" href="{% static 'plugin/highlights/css/pace.css' %}">
<link rel="stylesheet" href="{% static 'plugin/highlights/css/custom.css' %}">
<link rel="stylesheet" href="{% static 'plugin/highlights/css/bootstrap.min.css' %}">
<!--<link rel="stylesheet" href="{% static 'plugin/highlights/css/highlights/borland.css' %}">-->
<link rel="stylesheet" href="{% static 'plugin/highlights/css/highlights/github.css' %}">
{% endblock %}

{% block content %}
<div class="row">
    <div class="m-top">
        <button id="goBack" type="button" class="btn btn-xs btn-success">返回</button>
    </div>
    <div class="art-info">
        <ul class="me-flex-l">
            <li>
                <span><i class="fa fa-calendar"></i> {{ art_obj.create_time }}</span>
            </li>
        </ul>
    </div>
    <div class="art-content">
        <h2 style="text-align: center;font-weight: 300;margin: 20px 0;">{{ art_obj.title }}</h2>
        {{ art_obj.content|safe }}
    </div>
    <div class="art-cate">
        <span class="btn-xs btn-primary">{{ cate.cate_name }}</span>
    </div>
    <div class="art-tag">
        {% for tag in tag_list %}
        <span class="btn-xs btn-success">{{ tag.tag_name }}</span>
        {% endfor %}
    </div>
    <div class="worth">
        <a id="popover" tabindex="0" class="btn btn-sm btn-danger" role="button" data-toggle="popover"
           data-trigger="focus">赞赏一个</a>
    </div>
    <div class="art-help">
        <div class="h-l me-flex-l">
            <ul>
                <li>
                    <span>作者 :</span><span>{{ art_obj.author.author_name }}.</span>
                </li>
                <li><span>发表时间 :</span><span>{{ art_obj.create_time }}.</span></li>
                <li><span>版权声明 :</span><span>知识是共享的,能帮助你就行.</span></li>
                <li><span>转载声明 :</span><span>没啥声明,自由转载,当然你注明出处更佳,对我有帮助.</span></li>
                <li><span>注 :</span><span>如果文章有错误的地方，还请指正,感谢!若对文章有疑惑,可联系本人或进群交流.</span></li>
            </ul>
        </div>
        <div class="groups">
            <img src="{% static 'img/wx.jpg' %}" alt="">
        </div>
    </div>
    <div class="question">
        <div class="q-head">
            <span>文章评论</span>
        </div>
        <div class="q-form">
            <textarea name="question" id="question" cols="30" rows="6" placeholder="在这里留下你的足迹吧! 你可以输入140个字."
                      maxlength="140"></textarea>
            <div class="inputs">
                <input type="text" class="form-control" placeholder="你的昵称" aria-describedby="basic-addon1">
                <input type="text" class="form-control" placeholder="你的邮箱" aria-describedby="basic-addon1">
                <button type="button" class="btn btn-sm btn-success">提交</button>
            </div>
        </div>
    </div>

</div>
{% endblock %}

{% block js %}
<script>

    $(function () {
        goBack();
        initTangle();
    });

    function goBack() {
        $('#goBack').click(function () {
            history.go(-1);
        });
    }

    function initTangle() {
        $('#popover').popover({
            template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
            content: '<div class="out-box"><img src="{% static "img/wx.jpg" %}"><img src="{% static "img/zfb.jpg" %}"></div>',
            html: true,
            placement: 'bottom',
        })
    }
</script>
{% endblock %}